<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ total }}</p>
    <button-counter v-on:increment1="incrementTotal"></button-counter>
    <button-counter v-on:increment2="incrementTotal"></button-counter>
</div>
<script>
    Vue.component('button-counter',{
        template:'<button v-on:click="increment">{{ counter }}</button>',
        data:function(){
            return {counter: 0}//组件数据就是这样的，函数式的，请注意
        },
        methods:{
            increment:function(){
                this.counter += 1;
                this.$emit('increment1',[12, 'kkk']);//$emit
                this.$emit('increment2',[123, 'kkkkkk']);//$emit
            }
        }
    });
    new Vue({
        el:'#app',
        data:{
            total:0
        },
        methods:{
            incrementTotal:function(e){
                this.total += 1;
                console.log(e);
            }
        }
    });
</script>
</body>
</html>
